<template>
  <div style="padding-left: 10%;padding-right: 10%;">
    <Row>
      <i-col span="4">
        <Menu style="margin-top: 50px;" active-name="1-1">
          <MenuItem name="1-1" to="/index/ucenter/myClass" style="font-size: 20px;">我的课程</MenuItem>
          <MenuItem name="1-2" to="/index/ucenter/myOrder" style="font-size: 20px;">订单中心</MenuItem>
          <MenuItem name="1-3" to="/index/ucenter/settings" style="font-size: 20px;">个人设置</MenuItem>
        </Menu>
      </i-col>
      <i-col v-if="courseList.length > 0" span="20" style="padding-left: 45px;margin-top: 50px;">
        <Card v-for="(item,index) in courseList" :key="index">
          <Row>
            <i-col span="4">
              <img :src="item.sysCourse.handcover" style="width: 100%;">
            </i-col>
            <i-col span="16" style="padding-left: 15px;">
              <div style="font-size: 20px;">{{item.sysCourse.courseName}}</div>
              <div>
                <img src="../../../assets/images/student/tutor-avatar.jpg" style="width: 20px;border-radius: 50%;">
                <span style="line-height:20px;font-size: 16px;">{{item.sysCourse.teacherId}}</span>
                <span>|</span>
                <span style="line-height:20px;font-size: 16px;">加入时间：{{formatDate(new Date(item.order.creatTime), 'yyyy-MM-dd hh:mm')}}</span>
              </div>
            </i-col>
            <i-col span="4">
              <Button type="error" style="margin-top: 45px;width: 100%;font-size: 18px;" @click="GoToStudy(item.sysCourse)">去学习</Button>
            </i-col>
          </Row>
        </Card>
        <!--<Page :total="total" show-total style="margin-top: 15px;text-align: center;" @on-change="pageChange"/>-->
        <page-com :total="total" @page-change="pageChange"></page-com>
      </i-col>
      <i-col v-else span="20" style="padding-left: 45px;margin-top: 50px;">
        <Card>
          <p style="text-align: center">暂无课程</p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import PageCom from '@/components/page'
  export default {
    name: 'index',
    components: {
      PageCom
    },
    provide () {
      return {
        reload: this.reload
      }
    },
    data () {
      return {
        course: false,
        courseList: [],
        size: 10,
        number: 1,
        total: 0
      }
    },
    methods: {
      getCoursePage () {
        let url = '/api/order/page'
        let params = this.$qs.stringify({
          size: this.size,
          number: this.number,
          orderStatus: 1,
          pay: 1
        })
        this.$post(url, params).then((res) => {
          this.$nextTick(function () {
            if (res.code === 0) {
              this.courseList = res.data
              this.total = res.total
            }
          })
        })
      },
      pageChange(change) {
        this.number = change
        this.getCoursePage()
      },
      formatDate (date, fmt) {
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
        }
        for (let k in o) {
          if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + ''
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
          }
        }
        return fmt
      },
      padLeftZero (str) {
        return ('00' + str).substr(str.length)
      },
      GoToStudy(obj) {
        let query = {}
        if (obj.courseType === '2') {
          query = {
            id: obj.id,
            liveType: 0
          }
        } else {
          if (obj.liveType === '1') {
            query = {
              id: obj.id,
              liveType: 1
            }
          } else {
            query = {
              id: obj.id,
              liveType: 2
            }
          }
        }
        let url = this.$router.resolve({path: '/index/wacth-live', query: query})
        window.open(url.href, '_blank')
      }
    },
    mounted () {
      this.getCoursePage()
    }
  }
</script>

<style scoped>
  .time{
    font-size: 14px;
    font-weight: bold;
  }
  .content{
    padding-left: 5px;
  }
</style>
